<template>
    <div class="EchartPractice">
        <div ref="main" id="main"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {

    name: "EchartPractice",
    methods: {
        drawChart() {
            // 直角坐标系中的常用配置
            // 直角坐标系图表︰柱状图折线图散点图
            // 配置1:网格 grid
            // 配置2:坐标轴axis
            let myEchart = echarts.init(this.$refs.main);
            var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
            var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
            var option = {
                dataZoom: [//是一个数组,意味着可以配置多个区域缩放器
                    // 类型type
                    // slider:滑块
                    // inside:内置,依靠鼠标滚轮或者双指缩放
                    //  指明产生作用的轴
                    // xAxislndex:设置缩放组件控制的是哪个x轴,一般写0即可
                    // yAxisIndex:设置缩放组件控制的是哪个y轴,一般写0即可
                    // 指明初始状态的缩放情况
                    // start:数据窗口范围的起始百分比
                    // end:数据窗口范围的结束百分比

                    {
                        type: 'slider',
                        xAxisIndex: 0,
                    },
                    {
                        type: 'slider',
                        yAxisIndex: 0,
                        start: 0,
                        end: 70
                    }


                ],
                toolbox: {
                    feature: {// 区域缩放
                        dataZoom: {


                        }
                    },
                },

                grid: { // 坐标轴容器(背景)
                    show: true, // 是否可见
                    borderWidth: 3, // 边框的宽度
                    borderColor: 'red', // 边框的颜色
                    // left: 120, // 设置图表的位置
                    // top: 120,
                    // width: 500, // 设置图表的大小
                    // height: 150
                },
                xAxis: {
                    type: 'category',
                    data: xDataArr,
                    position: 'top',// x轴显示位置默认底部
                },
                yAxis: {
                    type: 'value',
                    position: 'right'// y轴显示位置默认左边
                },
                series: [
                    {
                        name: '语文',
                        type: 'bar',
                        markPoint: {
                            data: [
                                {
                                    type: 'max', name: '最大值'
                                }, {
                                    type: 'min', name: '最小值'
                                }
                            ]
                        },
                        markLine: {
                            data: [
                                {
                                    type: 'average', name: '平均值'
                                }
                            ]
                        },
                        label: {// 数值显示位置
                            show: true,
                            rotate: 60,
                            position: 'top'
                        },
                        barWidth: '30%',//柱条的宽度，不设时自适应
                        data: yDataArr// 数据
                    }
                ]
            }
            myEchart.setOption(option);
        }
    },
    mounted() {
        this.drawChart();
    }
}
</script>

<style scoped>
#main {
    width: 600px;
    height: 400px;
    margin: auto;
    margin-top: 100px
}
</style>

